/**
 * Created by wei on 17/11/7.
 * article 包含多个topic>replay>comment 及分页
 */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import base from '../base.js';
import cookie from '../cookie.js';
import axios from 'axios';
import PropTypes from 'prop-types';
import "../main.css";
const basePath = base().basePath;

const selfToken = cookie.getCookie('token');

class TipL extends  Component{


    render(){

        const {comment, height,nickname, fnDeleteComment}  = this.props;

        let del;
        if(selfToken === comment.user.token){
            del = (
                <div style={{position:'absolute', top:'5px', right:'5px',zIndex:'1999'}}>
                    <a onClick={()=>fnDeleteComment(comment.id)} href="javascript:void(0)" ><img src="/images/close.png" width={20} height={20}/></a>
                </div>
            );
        }

        return (
            <div className={'tip-l-self-del tip-l-lay'} style={{marginTop:height+'px'}}>
                {del}
                <div style={{margin:'3px 7px', wordBreak:'keep-all', wordWrap:'break-word'}}>
                    <div style={{width:'100%'}}><a href="javascript:;">{comment.user.nickname}</a>:</div>
                    <div style={{color:'#9b8878'}}>{comment.content}</div>
                </div>
            </div>
        );
    }
}

TipL.propTypes = {
    comment: PropTypes.object.isRequired,
    height: PropTypes.number.isRequired,
    nickname: PropTypes.string.isRequired,
    fnDeleteComment: PropTypes.func.isRequired,
};



class PArticles extends Component{

    constructor(props){
        super(props);
        const {topic, replays, userInfo} = this.props;
        this.state = {
            token: cookie.getCookie('token'),
            nickname: cookie.getCookie('nickname'),
            topic:topic,
            replays:replays,
            userInfo:userInfo,
            height:0,
            type:'topic',
        }
    }

    componentWillReceiveProps(nextProps){
        const {topic, replays, userInfo} = nextProps;
        this.setState({
            topic:topic,
            replays:replays,
            userInfo:userInfo,
        })
    }

    componentDidMount(){
        var dom = ReactDOM.findDOMNode(this.refs.article);
        var height = dom.offsetHeight;
        this.setState({
            height: height,
        });
    }


    delTopic(delId){
        const {fnDelTopic} = this.props;
        fnDelTopic(delId);
    }

    delReplay(delId){
        const {fnDelReplay} = this.props;
        fnDelReplay(delId);
    }

    delComment(delId){
        const {fnDelComment} = this.props;
        fnDelComment(delId);
    }

    getFirstFoot(){

        let topicZan;
        let topicCai;
        topicZan = (
            <span><img src="/images/zan.png"/><span>{this.state.topic.like}</span></span>
        );
        topicCai = (
            <span><img src="/images/zan.png" className="cai"/><span>{this.state.topic.hate}</span></span>
        );

        if(this.state.replays.length > 0){
            return (
                <div className="foot">
                    {topicZan}
                    {topicCai}
                    &nbsp;&nbsp;

                    <a target="_blank" href={'/person.html#/?t='+this.state.replays[0].user.token}  style={{float: 'right', marginRight: '10px'}}>
                        <img src={this.state.replays[0].user.avatar}/>
                    </a>
                    <a href="javascript:void(0);" style={{float: 'right', marginTop: '5px'}}>{this.state.replays[0].user.nickname}</a>
                </div>
            );
        }else{
            let del;
            if((selfToken === this.state.topic.user.token) && (!this.state.topic.comments || this.state.topic.comments.length === 0)){
                del = <a href="javascript:void(0);" onClick={this.delTopic.bind(this, this.state.topic.id)} class="btn2 float_r">删除</a>;
            }
            return (
                <div className="foot">
                    {topicZan}
                    {topicCai}
                    &nbsp;&nbsp;
                    {del}
                    <div className="comments_header"></div>
                </div>
            );
        }
    }


    getReplayContent(){
        if(this.state.replays.length > 0){
            var contents = [];
            for(var i=0; i<this.state.replays.length-1; i++){


                let replayZan;
                let replayCai;
                replayZan = (
                    <span><img src="/images/zan.png"/><span>{this.state.replays[i].like}</span></span>
                );

                replayCai = (
                    <span><img src="/images/zan.png" className="cai"/><span>{this.state.replays[i].hate}</span></span>
                );

                contents.push((
                    <div>
                        <div className="story2">
                            <div className="format" dangerouslySetInnerHTML={{__html: this.state.replays[i].content}}>

                            </div>
                        </div>
                        <div className="foot">
                            {replayZan}
                            {replayCai}
                            &nbsp;&nbsp;

                            <a target="_blank" href={'/person.html#/?t='+this.state.replays[i+1].user.token} style={{float: 'right', marginRight: '10px'}}>
                                <img src={this.state.replays[i+1].user.avatar}/>
                            </a>
                            <a href="javascript:void(0);" style={{float: 'right', marginTop: '5px'}}>{this.state.replays[i+1].user.nickname}</a>
                        </div>
                    </div>
                ));
            }
            return contents;
        }
    }

    getLastReplayContent(){
        if(this.state.replays.length > 0){
            let length = this.state.replays.length -1;

            let replayZan;
            let replayCai;
            replayZan = (
                <span><img src="/images/zan.png"/><span>{this.state.replays[length].like}</span></span>
            );

            replayCai = (
                <span><img src="/images/zan.png" className="cai"/><span>{this.state.replays[length].hate}</span></span>
            );

            let del;
            if((selfToken === this.state.replays[length].user.token) && (this.state.type == 'topic' || this.state.type == 'replay')){
                del = <a  onClick={this.delReplay.bind(this, this.state.replays[length].id)}  href="javascript:void(0);" class="btn2 float_r">删除</a>;
            }

            return (
                <div>
                    <div className="story2">
                        <div className="format" dangerouslySetInnerHTML={{__html: this.state.replays[length].content}}>

                        </div>
                    </div>
                    <div className="foot">
                        {replayZan}
                        {replayCai}
                        &nbsp;&nbsp;
                        {del}
                        <div className="comments_header"></div>
                    </div>

                </div>
            );
        }
    }


    render(){

        const comments = this.state.topic.comments;
        let leftComment = [];
        if(comments && comments.length){
            var that = this;
            leftComment = comments.map(function (v, i, arr) {
                return <TipL fnDeleteComment={that.delComment.bind(that)} nickname={that.state.nickname}  comment={v} height="20px"/>;
            })
        }
        return (
            <div style={{width:'100%',overflow:'hidden'}}>
                <div className="float_l" style={{width:'19%'}}>
                    <div>&nbsp;</div>
                    {leftComment}
                </div>
                <div className="article float_l" ref="article" style={{width:'60%'}}>
                    <div className="con">
                        <div className="author">
                            <a target="_blank" href={'/person.html#/?t='+this.state.userInfo.token} >
                                <img src={this.state.userInfo.avatar} alt=""/>
                            </a>
                            <a target="_blank" href={'/person.html#/?t='+this.state.userInfo.token}  ><h2>{this.state.userInfo.nickname}</h2></a>
                        </div>
                        <div className="story">
                            <div className="format" dangerouslySetInnerHTML={{__html: this.state.topic.content}}>

                            </div>
                        </div>
                        {this.getFirstFoot()}
                        {this.getReplayContent()}
                        {this.getLastReplayContent()}
                    </div>
                </div>
            </div>
        );
    }
}



PArticles.propTypes = {
    topic: PropTypes.object.isRequired,
    replays: PropTypes.array.isRequired,
    userInfo: PropTypes.object.isRequired,
    type: PropTypes.string.isRequired,
    fnDelTopic: PropTypes.func.isRequired,
    fnDelReplay: PropTypes.func.isRequired,
    fnDelComment: PropTypes.func.isRequired,
};

export default PArticles;